<template>
  <div class="top">
    <TopicSwiper :data="topicList" />
    <div class="product_name">
      <ul>
        <li>{{ topicList.productName }}</li>
        <li class="introduce">{{ topicList.productContext }}</li>
        <li class="money">￥{{ topicList.productPrice }}</li>
      </ul>
    </div>
    <div class="site">
      <p>发货:{{ topicList.productAddress }}</p>
      <p>快递:包邮</p>
      <p>已售:{{ topicList.total }}</p>
    </div>
    <div class="center">
      <ul class="serve">
        <li>服务</li>
        <li>7天无理由退货.运费险</li>
        <li class="li">></li>
      </ul>
      <ul class="serve">
        <li>选择</li>
        <TopicMessageBox :data="topicList" :lis = list />
        <li class="li">></li>
      </ul>
      <ul class="serve">
        <li>参数</li>
        <li>品牌、系列...</li>
        <li class="li">></li>
      </ul>
    </div>
    <TopicEvaluate :data="comment" />
    <h2>商品详情</h2>
    <div class="comment" v-for="item in list2" :key="item">
      <img :src="item" alt="" />
    </div>
    <NavTopic class="footer" :data = list />
  </div>
</template>
  

<script>
import TopicSwiper from "../topic/TopicCompos/TopicSwiper.vue";
import TopicEvaluate from "../topic/TopicCompos/TopicEvaluate.vue";
import TopicMessageBox from "../topic/TopicCompos/TopicMessageBox.vue";
import NavTopic from "./TopicCompos/NavTopic.vue"
import { getTopic,getComment,getComment1 } from "../../api";
export default {
  components: {
    TopicSwiper,
    TopicEvaluate,
    TopicMessageBox,
    NavTopic
  },
  name: "Topic",
  data() {
    return {
      list: [],
      topicList: {},
      imgsrc: "http://192.168.1.19:8080/",
      list1: [],
      list2: [],
      comment: [],
    };
  },
  methods: {
    getComment1(){
      getComment1(this.$route.params).then(res=>{
        // console.log(res,"png");
        this.comment  = res.data.data
        this.comment.map(item=>{
          item.userImg  = this.$store.state.imgsrc + item.userImg
          // console.log(this.comment);
        });
      });
      this.$store.dispatch("getTopic", this.$route.params);
    },
    getTopic() {

      getTopic(this.$route.params).then((res) => {
        this.list = res.data.data;
        this.topicList = { ...this.list[0] };
        this.topicList.productsImg = this.$store.state.imgsrc+ this.topicList.productsImg 
        // console.log( this.topicList,'sss22');

      });
    },
    getComment() {
      getComment().then((res) => {
        // console.log(res,"get");
        this.list1 = res.data.data
        this.list1.map(item=>{
          item = this.$store.state.imgsrc + item
         this.list2.push(item)
        })
      })
    }
  },
  created() {
    // console.log();
    this.getTopic();
    this.getComment();
    this.getComment1();
  },
};
</script>

<style scoped>
.footer{
  position: absolute;
  bottom: 0vh;
  width: 100vw;
}
.comment {
  background: white;
}
.serve .li {
  margin-right: 5vw;
  font-weight: bold;
}
.comment img {
  width: 100%;
}
h2 {
  font-weight: normal;
  font-size: 16px;
  background: white;
}
.top {
  width: 100vw;
  /* height: 20vh; */
  background: #e1e1e1;
  
}
/* 商品名称 */
.product_name {
  /* padding: 2%; */
  background: #fff;
  font-size: 18px;
  width: 96vw;
  height: 15vh;
  align-items: center;
  border-radius: 10px;
  margin: 0 auto;
  margin-bottom: 1vh;
}
.product_name li{
  margin-left: 2vw;
}
.money {
  color: rgb(231, 31, 31);
}
/* 地址 */
.site {
  width: 96vw;
  height: 6vh;
  line-height: 4vh;
  /* background: lightblue; */
   background-color: #fff;
 background-image: linear-gradient(to left, #fff , hsla(198, 14%, 85%, 0.608));
  border-radius: 10px;
  margin: 0 auto;
  display: flex;
  font-size: 16px;
  justify-content: space-around;
  align-items: center;
  /* margin-top: 0.5vh; */
}
.center {
  width: 96vw;
  height: 23vh;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 1vh;
  background: #fff;
}

/* 服务 */
.serve {
  display: flex;
  justify-content: space-between;
  padding-top: 3vh;
}
.serve li{
  margin-left: 2vw;
}
/* 商品介绍 */
.introduce {
  color: #585656;
  /* margin: 1vh; */
  line-height: 5vh;
  font-size: 14px;
}
h2 {
  font-size: 4vh;
  text-align: center;
  /* color: green; */
   /* color:#f35626; */
   background-image: -webkit-linear-gradient(bottom,rgb(201,115,255),rgb(20,11,255));
      /* background-image: -webkit-linear-gradient(bottom,rgb(255, 183, 115),rgb(255, 11, 11)); */
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   
  margin-top: 1vh;
}
</style>
